<template>
  <view class="page ui-form-basic">
    <fui-form ref="formRef" :model="form" class="form-wrapper" labelWidth="200" labelSize="28" labelWeight="bold">
      <fui-form-item label="物流公司" prop="wlgsid" left="0" marginTop="14" :padding="['16rpx', 0]" @click="showDeliveryPicker = true" arrow>
        <fui-input size="28" :padding="[0]" :borderBottom="false" placeholder="请选择物流公司" v-model="form.wlgsmc" disabled></fui-input>
      </fui-form-item>
      <fui-form-item label="物流人员" prop="wlrymc" left="0" marginTop="14" :padding="['16rpx', 0]">
        <fui-input size="28" :padding="[0]" :borderBottom="false" placeholder="请输入物流人员" v-model="form.wlrymc"></fui-input>
      </fui-form-item>
      <fui-form-item label="联系方式" prop="wlrysjh" left="0" marginTop="14" :padding="['16rpx', 0]">
        <fui-input size="28" :padding="[0]" :borderBottom="false" placeholder="请输入联系方式" v-model="form.wlrysjh"></fui-input>
      </fui-form-item>
      <fui-form-item label="上传物流单" prop="wldh" left="0" marginTop="14" :padding="['16rpx', 0]">
        <upload-image type="avatar" :max="1" @uploaded="uploadedDelivery">
        </upload-image>
      </fui-form-item>
      <fui-form-item label="物流单号" prop="wldh" left="0" marginTop="14" :padding="['16rpx', 0]">
        <fui-input size="28" :padding="[0]" :borderBottom="false" placeholder="请输入物流单号" v-model="form.wldh" :maxlength="20"></fui-input>
      </fui-form-item>
      <fui-form-item label="备注信息" prop="bz" left="0" marginTop="14" :padding="['16rpx', 0]">
        <template v-slot:vertical>
          <fui-textarea size="28" :maxlength="50" height="64rpx" :isCounter="true" radius="16" borderColor="#DFDFDF" v-model="form.bz" placeholder="请输入备注信息" textareaBorder></fui-textarea>
        </template>
      </fui-form-item>
    </fui-form>

    <view class="page-btn-wrapper">
      <fui-button v-for="(btn, index) in aftersaleStatus.deliveryBtns" :key="index" :text="btn.text" @click="handleClickBtn(btn)" :class="btn.className" height="78rpx" radius="8rpx"></fui-button>
    </view>

    <!-- 物流公司 -->
    <fui-picker layer="1" @cancel="showDeliveryPicker = false" radius :options="deliveryData" :fields="['name', 'id']" linkage :show="showDeliveryPicker" @change="onChangeDelivery"></fui-picker>
  </view>
</template>

<script setup>
import { ref, computed, inject } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { useStore } from 'vuex'
import { setTitle } from '@/utils/common'
import { AFTERSALE_VIEW_STATUS } from './view'
import uploadImage from '@/components/upload/image'
import orderApi from '@/api/order'
import deliveryApi from '@/api/delivery'

const tab = inject('$tab')
const modal = inject('$modal')
const store = useStore()

const aftersaleCode = ref(null)
const aftersaleStatus = computed(() => aftersaleCode.value ? AFTERSALE_VIEW_STATUS[aftersaleCode.value] : {})
const deliveryTitle = computed(() => {
  const deliveryOperation = aftersaleStatus.value.operations.find(item => item.func === 'handleToDelivery')
  return deliveryOperation ? deliveryOperation.text : ''
})

const orderId = ref('')
const deliveryId = ref('')
onLoad((option) => {
  aftersaleCode.value = option.aftersaleCode
  orderId.value = option.orderId
  deliveryId.value = option.deliveryId
  setTitle(deliveryTitle.value)
  getDeliveryList()
})

// 发货表单信息
const formRef = ref(null)
const form = ref({})
const rules = [
  {
    name: 'wlgsid',
    rule: ['required'],
    msg: ['请选择物流公司']
  },
  {
    name: 'wlrymc',
    rule: ['required'],
    msg: ['请输入物流人员']
  },
  {
    name: 'wlrysjh',
    rule: ['required', 'isMobile'],
    msg: ['请输入联系方式', '请输入正确的手机号']
  },
  {
    name: 'wldh',
    rule: ['required'],
    msg: ['请输入物流单号']
  }
]

// 物流公司
const deliveryData = ref([])
const getDeliveryList = async () => {
  try {
    await orderApi.getDeliveryList().then((res) => {
      if (res.code === 0) {
        deliveryData.value = res.data || []
      } else {
        modal.msgError(res.msg)
      }
    })
  } catch (e) {
    modal.msgError('获取物流公司数据失败')
  }
}
const showDeliveryPicker = ref(false)
const onChangeDelivery = (e) => {
  showDeliveryPicker.value = false
  form.value.wlgsid = e.value
  form.value.wlgsmc = e.text
}

// 上传物流单
const uploadedDelivery = async(e) => {
	if(e[0]){
		const res = await deliveryApi.getFreeLabel(e[0])
		if(res.code == 0){
			form.value.wldh = res.data
		}
	}
}

// 提交表单方法
const handleSubmit = async (btn) => {
  console.log(btn.text)
  try {
    const validRes = await formRef.value.validator(form.value, rules)
    form.value.orderId = orderId.value
    if (validRes.isPassed) {
      deliveryApi.addDelivery(form.value).then((res) => {
        if (res.code === 0) {
          modal.msg('提交成功！')
          setTimeout(() => {
            tab.navigateBack()
          }, 1000)
        } else {
          modal.msgError(res.msg)
        }
      })
    }
  } catch (err) {
    modal.msgError('提交失败！')
  }
}

// 返回
const handleBack = () => {
  tab.navigateBack()
}

// 操作栏按钮触发
const handleClickBtn = (btn) => {
  eval(btn.func)(btn)
}
</script>

<style lang="scss" scoped>
@import "@/static/scss/form.scss";
</style>
